<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>加班管理</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/icon.css">
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="<%=path%>/js/post.js"></script>
<script type="text/javascript" src="<%=path%>/js/util.js"></script>
<script type="text/javascript">

	var path = '${pageContext.request.contextPath}';
	
	function search(){
		var tree = $('#treeDepartment');
		var row = tree.treegrid('getSelected');		
		if (!row) {
			var root = tree.treegrid('getRoot');
			if (!root) {
				return;
			}
			tree.treegrid('select',root.id);
			row = root;
		}	
	
		var start=$('#selectStartDate').datebox('getValue');
		var end=$('#selectEndDate').datebox('getValue');
		var name=$('#searchName').val();
		var grid = $('#grid');
		grid.datagrid('load',{
			id : row.id,
			name:name,
			startDate:start,
			endDate:end
		});
	}

	function show() {
		$('#dlgWin').dialog('open');
	}

	function save() {
		var name='overtime';
		var url = path + '/'+name+'/save/';		
		postJson($('#dlgWin'), $('#form'), $('#grid'), url, name);
	}

	function del() {
		var grid = $('#grid');
		var url = path + '/overtime/delete/';
		delById(grid,url);
	}

	function selectEmployee() {
		$('#dlgEmployee').dialog('open');
	}
	
	function onLoadSuccessTree(row, data) {
		var tree = $('#tree');
		var root = tree.treegrid('getRoot');
		if (!root) {
			return;
		}
		tree.treegrid('select',root.id);
		loadEmployeeGird();
	}

	function onClickRowTree(){
		var key=$('#searchKey').val();
		loadEmployeeGird(key);
	}
	
	function loadEmployeeGird(key){
		var tree = $('#tree');
		var row = tree.treegrid('getSelected');
		
		if (!row) {
			return;
		}
		var grid = $('#gridEmployee');
		grid.datagrid('loadData', []);
		grid.datagrid('load', { 
			id : row.id,
			key : key
		});
	}
	
	function setEmployee(){
		var grid=$('#gridEmployee');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示','请选择数据!');
			return;
		}
		$('#employeeId').val(row.id);
		$('#employeeName').val(row.name);
		$('#dlgEmployee').dialog('close');
		
		var btnStartCardDate = $('#btnStartCardDate');
		var btnEndCardDate = $('#btnEndCardDate');

		btnStartCardDate.linkbutton('enable');
		btnEndCardDate.linkbutton('enable');
		
		$('#startCardId').val('');
		$('#endCardId').val('');
		$('#startCardDate').val('');
		$('#endCardDate').val('');
	}
	
	function setDate(){
		var grid=$('#gridDate');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示','请选择数据!');
			return;
		}
		
		var startCardDate=$('#startCardDate');
		var endCardDate=$('#endCardDate');
		
		var startCardId=$('#startCardId');
		var endCardId=$('#endCardId');
		
		var dialog=$('#dlgDate');
		var isStart=dialog.dialog('options').title.indexOf('开始')>0;
		if (isStart) {
			startCardDate.val(row.date);
			startCardId.val(row.id);
		}else{
			endCardDate.val(row.date);
			endCardId.val(row.id);
		}
		
		if (startCardDate.val() && endCardDate.val() && startCardDate.val()!='' && endCardDate.val()!=''){
			var ary=startCardDate.val().split(' ');
			var d=ary[0].split('-');
			var t=ary[1].split(':');
			var startDate=new Date(d[0],d[1],d[2],t[0],t[1],t[2]);
			
			ary=endCardDate.val().split(' ');
			d=ary[0].split('-');
			t=ary[1].split(':');
			var endDate=new Date(d[0],d[1],d[2],t[0],t[1],t[2]);
			
			var hour=parseInt((endDate.getTime() - startDate.getTime()) / parseInt(1000 * 3600));
			if (hour<0) {
				var tdate=endCardDate.val();
				endCardDate.val(startCardDate.val());
				startCardDate.val(tdate);
				
				tdate=endCardId.val();
				endCardId.val(startCardId.val());
				startCardId.val(tdate);
				
				hour=Math.abs(hour);
			}
			$('#hour').numberspinner('setValue', hour); 
			$('#day').numberbox('setValue', ((hour%8)<=4?0.5:1));
		}
		
		dialog.dialog('close');
	}
	
	function searchDate() {
		var id=	$('#employeeId').val();
		var start=$('#dtSelectStartDate').datebox('getValue');
		var end=$('#dtSelectEndDate').datebox('getValue');
		
		var grid = $('#gridDate');
		grid.datagrid('load',{id:id,startDate:start,endDate:end});
	}
	
	function selectStartCard() {
		setNowDate();
		var dialog=$('#dlgDate');
		var options=dialog.dialog('options');
		options.title='选择加班开始时间';
		dialog.dialog('setTitle', options.title);
		dialog.dialog('open');
		
		searchDate();
	}

	function selectEndCard() {
		setNowDate();
		var dialog=$('#dlgDate');
		var options=dialog.dialog('options');
		options.title='选择加班结束时间';
		dialog.dialog('setTitle', options.title);
		dialog.dialog('open');
		
		searchDate();
	}
	
	function setNowDate() {
		var date = new Date();
		date.setDate(1);
		$('#selectStartDate').datebox('setValue', date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
		date.setMonth(date.getMonth() + 1);
		date.setDate(date.getDate() - 1);
		$('#selectEndDate').datebox('setValue', date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
	}
	
	$(function(){
		setNowDate();
	});
</script>
</head>
<body class="easyui-layout">

	<!-- 选择时间工具栏 -->
	<div id="tbDate" style="height:auto">
		录入时间从： <input id="dtSelectStartDate" class="easyui-datebox"
			data-options="onSelect:searchDate" /> 到： <input id="dtSelectEndDate"
			class="easyui-datebox" data-options="onSelect:searchDate" />
	</div>
	<!-- 选择时间窗体 -->
	<div id="dlgDate" class="easyui-dialog" title="选择开始时间"
		style="width:520px;height:420px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						setDate();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgDate').dialog('close');
					}
				}]
			">
		<table id="gridDate" class="easyui-datagrid"
			data-options="
			sortOrder:'desc',
			sortName:'date',
			remoteSort:false,
			idField:'id',
			fit:true,
			toolbar:'#tbDate',
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/card/loadAllByEmployee/',
			striped: true,
			pageSize:10,
			pagination:true,
			rownumbers:true
			">
			<thead>
				<tr>
					<th data-options="field:'employeeCode',width:60">工号</th>
					<th data-options="field:'employeeName',width:80">姓名</th>
					<th data-options="field:'date',width:120,align:'center'">时间</th>
				</tr>
			</thead>
		</table>
	</div>


	<!-- 选择员工窗體 -->
	<div id="dlgEmployee" class="easyui-dialog" title="选择员工"
		style="width:680px;height:400px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						setEmployee();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgEmployee').dialog('close');
					}
				}]
			">
		<div class="easyui-layout" data-options="fit:true">
			<!-- 部门 -->
			<div data-options="region:'west',split:true" style="width:160px;">
				<table id="tree" class="easyui-treegrid"
					data-options="
				fit:true,
				url: '<%=path%>/department/loadAll',
				idField: 'id',
				treeField: 'name',
				onLoadSuccess: onLoadSuccessTree,
				onClickRow: onClickRowTree,
				queryParams:{id:2}
			">
					<thead>
						<tr>
							<th data-options="field:'name'" width="140">部门名称</th>
						</tr>
					</thead>
				</table>
			</div>

			<!-- 选择员工工具栏 -->
			<div id="tbEmployee" style="height:auto">
				检索条件: <input class="easyui-validatebox" type="text" id="searchKey"
					onchange="loadEmployeeGird(this.value)"
					data-options="required:false" />
			</div>
			<div data-options="region:'center'">
				<table id="gridEmployee" class="easyui-datagrid"
					data-options="
			sortOrder:'desc',
			sortName:'employeeCode',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/employee/loadAll/',
			toolbar:'#tbEmployee',
			striped: true,
			rownumbers:true">
					<thead>
						<tr>
							<th data-options="field:'employeeCode',width:160,sortable:true">工号</th>
							<th data-options="field:'name',width:180,sortable:true">姓名</th>
						</tr>
					</thead>
				</table>

			</div>
		</div>
	</div>

	<!-- 添加加班窗体 -->
	<div id="dlgWin" class="easyui-dialog" title="添加加班"
		style="width:340px;height:280px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						save();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgWin').dialog('close');
					}
				}]
			">
		<form id="form" method="post">
			<table>
				<tr>
					<td>员工:</td>
					<td><input id="employeeId" name="employeeId" type="hidden" />
						<input id="employeeName" class="easyui-validatebox" type="text"
						data-options="required:true" readonly="readonly" /> <a href="#"
						class="easyui-linkbutton"
						data-options="iconCls:'icon-add',plain:true"
						onclick="selectEmployee()"></a>
					</td>
				</tr>
				<tr>
					<td>加班时间 从:</td>
					<td><input id="startCardId" name="startCardId" type="hidden" />
						<input id="startCardDate" class="easyui-validatebox" type="text"
						data-options="required:true" readonly="readonly" /> <a href="#"
						class="easyui-linkbutton" id="btnStartCardDate"
						data-options="iconCls:'icon-add',plain:true,disabled:true"
						onclick="selectStartCard()"></a>
					</td>
				</tr>
				<tr>
					<td>到:</td>
					<td><input id="endCardId" name="endCardId" type="hidden" /> <input
						id="endCardDate" class="easyui-validatebox" type="text"
						data-options="required:true" readonly="readonly" /> <a href="#"
						class="easyui-linkbutton" id="btnEndCardDate"
						data-options="iconCls:'icon-add',plain:true,disabled:true"
						onclick="selectEndCard()"></a>
					</td>
				</tr>
				<tr>
					<td>工时:</td>
					<td><input id="hour" name="hour"
						data-options="min:1,max:8,required:true,value:1"
						class="easyui-numberspinner" type="text" />
					</td>
				</tr>
				<tr>
					<td>工作日:</td>
					<td><input id="day" name="day"
						data-options="min:0.5,max:1,precision:1,required:true,value:1"
						class="easyui-numberbox" type="text" />
					</td>
				</tr>
				<tr>
					<td>备注:</td>
					<td><input name="remark" class="easyui-validatebox"
						type="text" />
					</td>
				</tr>

			</table>
		</form>
	</div>

	<!-- 部门 -->
	<div data-options="region:'west',split:true" style="width:160px;">
		<table id="treeDepartment" class="easyui-treegrid"
			data-options="
				fit:true,
				url: '<%=path%>/department/loadAll',
				idField: 'id',
				treeField: 'name',
				onLoadSuccess: search,
				onClickRow: search,
				queryParams:{id:2}
			">
			<thead>
				<tr>
					<th data-options="field:'name'" width="140">部门名称</th>
				</tr>
			</thead>
		</table>
	</div>

	<!-- 工具栏 -->
	<div id="tb" style="height:auto">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="show()">添加</a> <a href="#" class="easyui-linkbutton"
				iconCls="icon-remove" plain="true" onclick="del()">删除</a>
		</div>
		<div>
			时间从： <input id="selectStartDate" class="easyui-datebox"
				data-options="onSelect:search" /> 到： <input id="selectEndDate"
				class="easyui-datebox" data-options="onSelect:search" /> 检索条件: <input
				class="easyui-validatebox" type="text" id="searchName"
				onchange="search()" />
		</div>
	</div>
	<div data-options="region:'center'">
		<table id="grid" class="easyui-datagrid"
			data-options="
			sortOrder:'desc',
			sortName:'date',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/overtime/loadAll/',
			toolbar:'#tb',
			striped: true,
			pageSize:20,
			pagination:true,
			fitColumns:false,
			rownumbers:true
			">
			<thead>
				<tr>
					<th data-options="field:'departmentName',width:100,align:'left'">部门</th>
					<th data-options="field:'employeeCode',width:100,align:'left'">工号</th>
					<th data-options="field:'employeeName',width:100,align:'left'">姓名</th>
					<th
						data-options="field:'date',width:80,align:'left',formatter:formatDate">添加日期</th>
					<th data-options="field:'day',width:80,align:'right'">工作日</th>
					<th data-options="field:'hour',width:80,align:'right'">工时</th>
					<th data-options="field:'startCardDate',width:120,align:'left'">加班开始时间</th>
					<th data-options="field:'endCardDate',width:120,align:'left'">加班结束时间</th>
					<th data-options="field:'remark',width:200,align:'left',fixed:true">备注</th>
				</tr>
			</thead>
		</table>

	</div>
</body>
</html>